import React, { useEffect, useState } from 'react'

/*
    useEffect:
        - Effect Hook 可以让你在函数组件中执行副作用操作
        - Effect可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
        - useEffect 接收第一个参数是一个回调函数，当达到条件的时候，就会触发当前的回调函数
        - useEffect 接收第二个参数是一个数组
                - 数组中传入state，则当前state发生改变的时候触发当前Effect中的回调函数
                - 如果传递的是一个空数组，则useEffect回调函数只有在初始化才执行
                - 如果不传递第二个参数，则无论初始化还是更新的时候都会执行

          - useEffect的回调函数可以返回一个函数，当组件被卸载的时候，或再次渲染的时候，会执行这个函数，用来左收尾工作
          - useEffect 可以根据情况书写多次


*/

export default function App() {
  const [isHot , setIsHot] = useState(true);
  const [count , setCount] = useState(0);
  //当写第二个参数的时候 只有初始化的时候执行一次，无论怎么渲染都不会触发
  useEffect(() => {
    console.log('我被执行啦');
    //第二个参数的数组中写入参数 修改当前的参数会被触发
  },[isHot])


  useEffect(() => {
    console.log('你的最新体重' + count);
  },[count])
 
  return (
    <div>
        <h1>今天真{isHot?'热':'冷'}啊</h1>
        <button onClick = {() => {setIsHot(!isHot)}}>点击切换天气</button>
        <hr />
        <h2>今天我的体重又增长啦{count}kg</h2>
        <button onClick = {() => {setCount(count + 1)}}>点击增加体重</button>
    </div>
  )
}
